<template>
  <view class="login">
    <view class="top">
      <uv-navbar
        title="忘记密码"
        height="44px"
        titleStyle="{font-weight: bold;font-size: 1.1rem;}"
        bgColor="#dff8f7"
        @leftClick="leftClick"
      ></uv-navbar>
    </view>
    <view class="userlogin">
      <view class="userlogin1">
        <uv-input
          placeholder="请输入您的手机号"
          customStyle="border:none;padding: 2%;"
          v-model="phone"
        ></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input
          placeholder="请输入您的密码"
          customStyle="border:none;padding: 2%;"
          v-model="password"
        ></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input
          placeholder="确认密码"
          customStyle="border:none;padding: 2%;"
          v-model="confirmPassword"
        ></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input
          placeholder="请输入验证码"
          customStyle="border:none;padding: 2%;"
          v-model="verificationCode"
        >
          <!-- vue3模式下必须使用v-slot:suffix -->
          <template v-slot:suffix>
            <uv-code
              ref="uCode"
              @change="codeChange"
              seconds="60"
              changeText="X秒重新获取"
            ></uv-code>
            <uv-button
              @click="getCode"
              :text="tips"
              color="#008c8c"
              type="success"
              size="mini"
            ></uv-button>
          </template>
        </uv-input>
      </view>
    </view>
    <view class="determine">
      <uv-button
        type="primary"
        color="#008c8c"
        shape="circle"
        text="确认修改"
        @click="resetPassword"
      ></uv-button>
      <button class="btn">登录</button>
    </view>
  </view>
</template>

<script>
import { uniRequest } from "../../utils/request/request";
export default {
  data() {
    return {
      tips: "",
      value: "内容",
      phone: "",
      password: "",
      confirmPassword: "",
      verificationCode: "",
    };
  },
  methods: {
    //返回login
    leftClick() {
      uni.navigateTo({ url: "/pages/login/login" });
      console.log("leftClick");
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.showToast({
            title: "验证码已发送",
            duration: 2000,
          });

          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
          const mobile = this.phone;
          uniRequest(
            "login/sms?server=1",
            function (err, data) {
              if (err) {
                // 错误
                console.log(err);
              } else {
                console.log('"成功了"', data);
                uni.showToast({
                  title: "验证码是" + data, // 提示文字
                  duration: 6000, // 显示时间，单位ms，默认2秒
                  icon: "success",
                });
                const verificationCode = data;
              }
            },
            "POST",
            {
              mobile: mobile,
            }
          );
        }, 2000);
      } else {
        uni.showToast({
          title: "倒计时结束后再发送",
          duration: 2000,
        });
      }
    },
    resetPassword() {
      if (this.password == this.confirmPassword) {
        const mobile = this.phone;
        const password = this.password;
        const code = this.verificationCode;
        console.log(mobile, password, code);
        uniRequest(
          "login/forgot?server=1",
          function (err, data) {
            if (err) {
              // 错误
              console.log(err);
            } else {
              console.log("重置密码成功");
              uni.showToast({
                title: "重置密码成功", // 提示文字
                duration: 2000, // 显示时间，单位ms，默认2秒
                icon: "success",
              });
              uni.navigateTo({
                url: "/pages/login/login",
              });
            }
          },
          "POST",
          {
            mobile: mobile,
            code: code,
            password: password,
          }
        );
      } else {
        uni.showToast({
          title: "两次密码不一致",
          duration: 2000,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
@import url("/pages/password/password.css");
</style>
